<template>
    <Layout>
        <div ref="mainContainer" class="main-container" v-loading="isLoading">
            <BlogDetail :blog="data" v-if="data" />
            <!-- 文章加载出来前不加载评论区 -->
            <BlogComment v-if="!isLoading" />
        </div>
        <template #right>
            <div class="right-container" v-loading="isLoading">
                <BlogToc :toc="data.toc" v-if="data" />
            </div>
        </template>
    </Layout>
</template>

<script>
import fetchData from '@/mixins/fetchData';
import { getBlog } from "@/api/blog";
import Layout from "@/components/Layout";
import BlogDetail from './components/BlogDetail.vue';
import BlogToc from './components/BlogToc.vue';
import BlogComment from "./components/BlogComment";
import mainScroll from '@/mixins/mainScroll';
import { titleController } from '@/utils';

export default {
    mixins: [fetchData(null), mainScroll("mainContainer")],
    components: {
        Layout,
        BlogToc,
        BlogDetail,
        BlogComment,
    },
    data() {
        return {
            scrollTop: 0,
        }
    },
    methods: {
        async fetchData() {
            const id = this.$route.params.id;
            let resp = await getBlog(id);
            if (!resp) {
                // 文章不存在
                 this.$router.push("/404");
                return;
            }
            titleController.setRouterTitle(resp.title);
            return resp;
        },
    },
    updated() {
        const hash = location.hash;
        location.hash = "";
        setTimeout(() => {
            location.hash = hash;
        }, 50);
    }
}
</script>

<style lang="less" scoped>
@import url(~@/styles/var.less);

.main-container {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    scroll-behavior: smooth;


}

.right-container {
    position: relative;
    height: 100%;
    width: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
}
</style>